import { useState, useCallback } from "react";
import { useTranslation } from 'react-i18next';
import classnames from "classnames";
import styles from "./index.module.scss";
import image30 from './assets/image_30.png';
import image31 from './assets/image_31.png';
import image32 from './assets/image_32.png';
import image33 from './assets/image_33.png';
import image34 from './assets/image_34.png';
import image35 from './assets/image_35.png';
import image36 from './assets/image_36.png';
import image37 from './assets/image_37.png';
import image38 from './assets/image_38.png';
import image39 from './assets/image_39.png';
import image40 from './assets/image_40.png';
import image41 from './assets/image_41.png';
import image42 from './assets/image_42.png';
import image43 from './assets/image_43.png';
import image44 from './assets/image_44.png';
import image45 from './assets/image_45.png';
import image46 from './assets/image_46.png';
import image47 from './assets/image_47.png';
import image48 from './assets/image_48.png';
import homeBgPng from './assets/home-bg.png';
import { Link } from "react-router-dom";

export default function GeneratedComponent() {
  const [grayscale, setGrayscale] = useState(false);
  const { t } = useTranslation();

  const handleChangeToGrayscale = useCallback(
    () => {
      setGrayscale(!grayscale);
    },
    [grayscale]
  );

  return (
    <div className={styles.page}>
      <div className={classnames(styles.wrap, grayscale && styles.gary_wrap)}>
        <div className={styles.container}>
          <div className={styles.content1}>
            <img src={homeBgPng} alt="" />
          </div>

          <div className={styles.content}>
            <div className={styles.main}>
              <img
                src={image30}
                className={styles.image}
              />
              <div className={styles.text}>
                {t('看见差异，重构')}<span className={styles.text__seg1}>{t('视界')}</span>
              </div>
              <div className={styles.section}>
                <div className={styles.text1}>
                  <div className={styles.text1__linebreak}>
                    {t('每12位男性中1人、每200位女性中1人，正经历着你未曾想象的色彩维度。')}
                  </div>
                  <div>{t('「错位色觉」搭建视觉平权的认知桥梁。')}</div>
                </div>
              </div>
              <div className={styles.section1}>
                <div className={styles.subSection}>
                  <div className={styles.block}>
                    <div className={styles.subBlock} onClick={handleChangeToGrayscale}>
                      <div className={styles.text2}>{grayscale ? t('回到彩色模式') : t('色觉差异者眼中的世界')}</div>
                      <img
                        src={image31}
                        className={styles.image1}
                      />
                    </div>
                  </div>
                  <div className={styles.block1}>
                    <div className={styles.subBlock1}>
                      <Link to="/mobile/connect-us">
                        <div className={styles.text3}>{t('联系我们')}</div>
                      </Link>
                      <img
                        src={image32}
                        className={styles.image2}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.wrap1}>
        <div className={styles.container1}>
          <div className={styles.content2}>
            <div className={styles.main2}>
              <div className={styles.text4}>{t('「错位色觉」价值体系')}</div>
              <div className={styles.section5}>
                <div className={styles.text5}>
                  {t('将科学精神、社会行动与哲学思考熔铸为品牌基因')}
                </div>
              </div>
            </div>
          </div>
          <div className={styles.content3}>
            <div className={styles.main3}>
              <div className={styles.section6}>
                <div className={styles.subSection4}>
                  <div className={styles.block10}></div>
                  <div className={styles.block11}>
                    <div className={styles.subBlock4}>
                      <div className={styles.div5}>
                        <div className={styles.div6}>
                          <div className={styles.text6}>{t('视界平权')}</div>
                          <div className={styles.text7}>Vision&nbsp;Equity</div>
                        </div>
                      </div>
                      <div className={styles.div7}>
                        <div className={styles.text8}>
                          {t('主张所有视觉体验的平等价值，通过技术干预与人文叙事重构「正常」的定义，创造无阶层差异的感知生态。')}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={styles.section7}>
                <div className={styles.subSection5}>
                  <div className={styles.block12}></div>
                  <div className={styles.block13}>
                    <div className={styles.subBlock5}>
                      <div className={styles.div8}>
                        <div className={styles.div9}>
                          <div className={styles.text9}>{t('光谱理性')}</div>
                          <div className={styles.text10}>
                            Spectral&nbsp;Rationality
                          </div>
                        </div>
                      </div>
                      <div className={styles.div10}>
                        <div className={styles.text11}>
                          {t('以科学解构视觉认知的复杂性，用可验证的数据与前沿研究搭建普适性认知框架，消解色觉差异的误解与偏见。')}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={styles.section8}>
                <div className={styles.subSection6}>
                  <div className={styles.block14}></div>
                  <div className={styles.block15}>
                    <div className={styles.subBlock6}>
                      <div className={styles.div11}>
                        <div className={styles.div12}>
                          <div className={styles.text12}>{t('共生包容')}</div>
                          <div className={styles.text13}>
                            Symbiotic&nbsp;Inclusion
                          </div>
                        </div>
                      </div>
                      <div className={styles.div13}>
                        <div className={styles.text14}>
                          {t('超越简单的接纳逻辑，构建色觉差异者与常规视觉群体的双向赋能体系，在差异碰撞中催生新的创造力范式。')}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.wrap2}>
        <div className={styles.container2}>
          <div className={styles.content4}>
            <div className={styles.main4}>
              <div className={styles.section9}>
                <div className={styles.subSection7}></div>
                <img
                  src={image33}
                  className={styles.image32}
                />
                <img
                  src={image34}
                  className={styles.image33}
                />
              </div>
            </div>
            <div className={styles.main5}>
              <div className={styles.section10}>
                <img
                  src={image35}
                  className={styles.image34}
                />
                <div className={styles.text15}>{t('从视网膜到现实')}</div>
                <div className={styles.subSection8}>
                  <div className={styles.text16}>
                    <div className={styles.text16__linebreak}>
                      {t('从视网膜视锥细胞的工作原理，到色盲色弱的科学分类')}
                    </div>
                    <div>{t('收录6大高频疑问权威解答，揭开色觉矫正的真相与可能')}</div>
                  </div>
                </div>
                <div className={styles.subSection9}>
                  <Link to="/mobile/knowledge/encyclopedia">
                    <div className={styles.block16}>
                      <div className={styles.text17}>{t('前往知识科普')}</div>
                      <img
                        src={image36}
                        className={styles.image35}
                      />
                    </div>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.wrap4}>
        <div className={styles.container4}>
          <div className={styles.content6}>
            <div className={styles.main8}>
              <div className={styles.section13}></div>
              <img
                src={image37}
                className={styles.image40}
              />
              <img
                src={image38}
                className={styles.image41}
              />
            </div>
            <div className={styles.main9}>
              <div className={styles.section14}>
                <img
                  src={image39}
                  className={styles.image42}
                />
                <div className={styles.text21}>{t('辨色测试')}</div>
                <div className={styles.subSection13}>
                  <div className={styles.text22}>
                    {t('60秒专业测试生成视觉能力图谱，匿名数据直接助力色觉研究。')}
                  </div>
                </div>
                <div className={styles.subSection14}>
                  <Link to="/mobile/vision-test">
                    <div className={styles.block18}>
                      <div className={styles.text23}>{t('前往测试')}</div>
                      <img
                        src={image40}
                        className={styles.image43}
                      />
                    </div>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.wrap3}>
        <div className={styles.container3}>
          <div className={styles.content5}>
            <div className={styles.main6}>
              <div className={styles.section11}>
                <div className={styles.subSection10}></div>
                <img
                  src={image41}
                  className={styles.image36}
                />
                <img
                  src={image42}
                  className={styles.image37}
                />
              </div>
            </div>
            <div className={styles.main7}>
              <div className={styles.section12}>
                <img
                  src={image43}
                  className={styles.image38}
                />
                <div className={styles.text18}>{t('全球色觉专家')}</div>
                <div className={styles.subSection11}>
                  <div className={styles.text19}>
                    {t('直连色觉色异联合体30+权威专家，支持紧急医疗咨询通道及辅助工具资源库。')}
                  </div>
                </div>
                <div className={styles.subSection12}>
                  <Link to="/mobile/knowledge/encyclopedia">
                    <div className={styles.block17}>
                      <div className={styles.text20}>{t('前往专家支持')}</div>
                      <img
                        src={image44}
                        className={styles.image39}
                      />
                    </div>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className={styles.wrap5}>
        <div className={styles.container5}>
          <div className={styles.content7}>
            <div className={styles.main10}>
              <div className={styles.section15}></div>
              <img
                src={image45}
                className={styles.image44}
              />
              <img
                src={image46}
                className={styles.image45}
              />
            </div>
            <div className={styles.main11}>
              <div className={styles.section16}>
                <img
                  src={image47}
                  className={styles.image46}
                />
                <div className={styles.text24}>{t('校园色彩行动')}</div>
                <div className={styles.subSection15}>
                  <div className={styles.text25}>
                    {t('见证12所高校发起的认知平权运动')}
                  </div>
                </div>
                <div className={styles.subSection16}>
                  <div className={styles.block19}>
                    <div className={styles.text26}>{t('项目介绍')}</div>
                    <img
                      src={image48}
                      className={styles.image47}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
